<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
		  <el-form-item label="车队名称" prop="roomName">
		    <el-input v-model="formData.roomName" placeholder="请输入名称" />
		  </el-form-item>
          <el-form-item label="联系人" prop="name">
            <el-input v-model="formData.name" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入电话" />
          </el-form-item>
		  <el-form-item label="所在城市" prop="value2">
		     <el-input v-model="formData.value2" placeholder="请输入" />
		   </el-form-item>
		   <el-form-item label="供应商" prop="value5">
		      <el-input v-model="formData.value5" placeholder="请输入" />
		    </el-form-item>
           <el-form-item label="是否启用" prop="value3">
			   <el-radio-group v-model="formData.value3">
			       <el-radio label="启用">启用</el-radio>
			       <el-radio label="关闭">关闭</el-radio>
			     </el-radio-group>
            </el-form-item>
			<el-form-item label="简介/备注" prop="value4">
			   <el-input v-model="formData.value4" placeholder="简介/备注" />
			 </el-form-item>
			<div class="borders" v-if="formData.id">
				<el-form-item label="司机信息" >
				<el-button type="primary" size="mini" @click="addfleet()">增加司机</el-button>
			    <table class="table-bordered paymentTable1">
			    	<tbody>
			    		<tr>
			    			<th>司机名称</th>
			    			<th style="width: 270px;">联系电话</th>
			    			<th>车型</th>
			    			<th>车牌</th>
			    			<th>备注</th>
							
			    			<th></th>
			    		</tr>
						<tr v-for="(item,index) in fleetList" >
							<td> <el-input   v-model="item.driverName" /></td>
							<td> <el-input   v-model="item.fleetType" /></td>
							<td > <el-input   v-model="item.driverPhone" /></td>
							<td> <el-input   v-model="item.fleetNumber"  /></td>
							<td> <el-input   v-model="item.value1" /></td>
							
							<td style="width: 100px;padding-left: 20px;" >
								 <el-button size="mini" type="text" @click.prevent="removeDomain(item,2)">删除</el-button>
							</td>
						</tr>
						
					</tbody>	
				</table>
				</el-form-item>			   
			</div>
		   
      </el-form>
              <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
	import * as FleetApi from '@/api/team/fleet';
  import * as HotelApi from '@/api/team/hotel';
      export default {
    name: "HotelForm",
    components: {
                    },
    data() {
      return {
        // 弹出层标题
        dialogTitle: "",
        // 是否显示弹出层
        dialogVisible: false,
        // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
        formLoading: false,
		fleetList:[
			/* {
				driverName:"",
				fleetType:"",
				driverPhone:"",
				fleetNumber:"",
				value1:"",
			} */
		],
        // 表单参数
        formData: {
                            id: undefined,
                            name: undefined,
                            phone: undefined,
                            roomName: undefined,
                             roomType: 4,
                           value1: undefined,
                            value2: undefined,
                            value3: "启用",
                            value4: undefined,
        },
        // 表单校验
        formRules: {
			roomName: [{ required: true, message: '不能为空', trigger: 'blur' }],
			roomType: [{ required: true, message: '不能为空', trigger: 'blur' }]
                         /*name: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
                        phone: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
                        value1: [{ required: true, message: '自定义不能为空', trigger: 'blur' }],
                        value2: [{ required: true, message: '自定义不能为空', trigger: 'blur' }],
                        value3: [{ required: true, message: '自定义不能为空', trigger: 'blur' }],
                        value4: [{ required: true, message: '自定义不能为空', trigger: 'blur' }], */
        },
                        };
    },
    methods: {
      /** 打开弹窗 */
     async open(id) {
			this.dialogVisible = true;
			this.reset();
			// 修改时，设置数据
			if (id) {
			  this.formLoading = true;
			  try {
				const res = await HotelApi.getHotel(id);
				this.formData = res.data;
				const res2 = await FleetApi.getFleetPage({pageNo: 1,pageSize: 88,value2: id,});
				this.fleetList = res2.data.list;
				this.title = "修改团队—酒店管理";
			  } finally {
				this.formLoading = false;
			  }
			}
			this.title = "新增团队—酒店管理";
      },
	  //查询司机信息
	  async shouwfleetList(){
		  try {
		    const res = await FleetApi.getFleet(id);
		    this.formData = res.data;
		  } finally {
			  
		  }
	  },
      /** 提交按钮 */
      async submitForm() {
        // 校验主表
        await this.$refs["formRef"].validate();
                  this.formLoading = true;
        try {
          const data = this.formData;
                  // 修改的提交
          if (data.id) {
            await HotelApi.updateHotel(data);
            this.$modal.msgSuccess("提交成功");
            this.dialogVisible = false;
            this.$emit('success');
			//添加司机
			if(this.fleetList){
				await FleetApi.createBatchFleet(this.fleetList);
			}
			
            return;
          }
          // 添加的提交
          await HotelApi.createHotel(data);
          this.$modal.msgSuccess("新增成功");
          this.dialogVisible = false;
          this.$emit('success');
        } finally {
          this.formLoading = false;
        }
      },
	  addfleet(){
		  this.fleetList.push({
		  		driverName: "",
		  		fleetName: "",
		  		fleetType: "",
		  		fleetNumber: "",
		  		driverPhone: "",
		  		value1:"",
		  		value2:this.formData.id,
		  		
		   })
	  },
	  //删除司机
	  removeDomain(item) {
	  		
	  		var index = this.fleetList.indexOf(item)
	  		//判断是否存在团款id
	  		if(this.fleetList[index].id){
	  			this.handleDelete(this.payment1[index].id,index)
	  			return
	  		}
	  		if (index !== -1) {
	  		  this.fleetList.splice(index, 1)
	  		}
	  			
	  },
	  /** 删除司机数据库删除 */
	  async handleDelete(id,index,idnbem) {
	    await this.$modal.confirm('是否确认司机?')
	    try {
	     await FleetApi.deleteFleet(id);
	  		this.fleetList.splice(index, 1)
	        this.$modal.msgSuccess("删除成功");
	    } catch {}
	  },			  
                      /** 表单重置 */
      reset() {
        this.formData = {
                            id: undefined,
                            name: undefined,
                            phone: undefined,
                            roomName: undefined,
                            roomType: 4,
                            value1: undefined,
                            value2: undefined,
                            value3: "启用",
                            value4: undefined,
        };
        this.resetForm("formRef");
      }
    }
  };
</script>
<style scoped>
	.borders{
		border: solid 1px #dadada;
		    padding-top: 10px;
		.el-form-item { 
			margin-bottom:12px !important;
		}
		
	}
	.paymentTable1 {
		th{
			width: 212px;
			height: 30px !important;
		}
		
	}
table {
	    border-spacing: 0;
	    border-collapse: collapse;
	}
	.table-bordered {
	    border: 1px solid #95bce2;
	}
	.table-bordered>tbody>tr>td, 
	.table-bordered>tbody>tr>th,
	.table-bordered>tfoot>tr>td,
	.table-bordered>tfoot>tr>th,
	.table-bordered>thead>tr>td, 
	.table-bordered>thead>tr>th{
		border: 1px solid #ddd;
		padding: 5px 10px;
		
	}
	.table-bordered > thead > tr > th, 
	.table-bordered > tbody > tr > th, 
	.table-bordered > tfoot > tr > th, 
	.table-bordered > thead > tr > td, 
	.table-bordered > tbody > tr > td, 
	.table-bordered > tfoot > tr > td{
	    border: 1px solid #95bce2;
	}
	table th {
	   background-color: #c5ddf1;
	   
	   
	}
	table td{
		padding-top: 5px;
	}</style>